<template>
  <div>
    <a-card>
      <a-row style="margin-bottom: 10px">
        <a-col :span="24" style="display: flex;flex-direction: row-reverse">
          <a-button v-print="'#printReport'" type="primary">打印报表</a-button>
        </a-col>
      </a-row>
      <div id="printReport">
        <div style="display: flex;justify-content: space-between">
          <div style="display: flex;flex-direction: column;align-items: center">
            <vue-qr :text="commandbillCode" :size=60  margin=0 />
            <span>订单号</span>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center">
            <vue-qr :text="text" :size=60  margin=0 />
            <span>产品型号</span>
          </div>
        </div>
        <table border="1" cellPadding="5" cellSpacing="0" bordercolor="#000" style="width: 100%">
          <tr>
            <th colSpan="11">
              <div style="position: relative;text-align: center">
<!--                <img src="@/assets/reportIcon.png" width="100px" height="30px"-->
<!--                     style="position: absolute;left: 0px;top:-5px" />-->
                <span>生产制令信息确认单</span>
              </div>
            </th>
          </tr>
          <tr>
            <td>订单号</td>
            <td colspan="2">{{reportData.commandbillCode}}</td>
            <td colspan="2">客户料号</td>
            <td>{{reportData.clientCode}}</td>
            <td colspan="2">合同编号</td>
            <td></td>
            <td>类别</td>
            <td>{{reportData.produceGrade}}</td>
          </tr>
          <tr>
            <td>产品型号</td>
            <td colspan="2">{{reportData.mechanismName}}</td>
            <td colspan="2">订单数量</td>
            <td>{{reportData.plantNum}}</td>
            <td colspan="2">投产日期</td>
            <td>{{reportData.expectBegintime}}</td>
            <td>拟制</td>
            <td>{{userName}}</td>
          </tr>
          <tr>
            <td colspan="11" align="center">订单基本信息</td>
          </tr>
          <tr>
            <td colspan="2">合同性质</td>
            <td>时段合同</td>
            <td colspan="2"></td>
            <td>数量合同</td>
            <td colspan="2"></td>
            <td>试产</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2">客户支持</td>
            <td>现场</td>
            <td colspan="2"></td>
            <td>电话</td>
            <td colspan="2"></td>
            <td>其它通讯</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2">工艺要求</td>
            <td colspan="9">
<!--              无铅Sn96.5%Ag3.0%Cu0.5%-->
              <a-radio-group v-model="gyvalue">
                <a-radio v-for="item in checkedList" :value="item.value" :key="item.label">{{ item.label }}</a-radio>
              </a-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="2">品质要求</td>
            <td colspan="9">IPC-A-610-F外观检验标准</td>
          </tr>
          <tr>
            <td colspan="2">包装要求</td>
            <td colspan="9">防静电吸塑盘，无外箱包装</td>
          </tr>
          <tr>
            <td colspan="2">交期要求</td>
            <td colspan="9"></td>
          </tr>
          <tr>
            <td colspan="11" align="center">生产确认</td>
          </tr>
          <tr>
            <td colspan="2">物料齐套</td>
            <td>程序</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>钢网</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>工装治具</td>
            <td align="center">Y</td>
            <td align="center">N</td>
          </tr>
          <tr>
            <td colspan="2">其它</td>
            <td colspan="6"></td>
            <td>负责人</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2" rowspan="2">交期确认</td>
            <td>条码标识</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>物料损耗</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>包装包材</td>
            <td align="center">Y</td>
            <td align="center">N</td>
          </tr>
          <tr>
            <td>测试治具</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>焊接辅料</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>人员</td>
            <td align="center">Y</td>
            <td align="center">N</td>
          </tr>
          <tr>
            <td colspan="2">其它</td>
            <td colspan="6"></td>
            <td>负责人</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2" rowspan="3">品质确认</td>
            <td>物料核对</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>物料检验</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>上线核查</td>
            <td align="center">Y</td>
            <td align="center">N</td>
          </tr>
          <tr>
            <td>在线检测</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>首件</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>巡检</td>
            <td align="center">Y</td>
            <td align="center">N</td>
          </tr>
          <tr>
            <td>出货检验</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>标签</td>
            <td align="center">Y</td>
            <td align="center">N</td>
            <td>程序</td>
            <td align="center">Y</td>
            <td align="center">N</td>
          </tr>
          <tr>
            <td colspan="8"></td>
            <td>负责人</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2">仓库</td>
            <td colspan="3">来料数：</td>
            <td colspan="3">入库数：</td>
            <td colspan="3">发货数：</td>
          </tr>
          <tr>
            <td colspan="2">其它</td>
            <td colspan="6"></td>
            <td>负责人：</td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="11" align="center">准备及异常反馈</td>
          </tr>
          <tr>
            <td colspan="11">
              <textarea style="width: 100%"/>
            </td>
          </tr>
          <tr>
            <td colspan="3">拟制：{{userName}}</td>
            <td colspan="3">审核：</td>
            <td colspan="3">批准：</td>
            <td colspan="2">存档：</td>
          </tr>
        </table>
      </div>
    </a-card>
  </div>
</template>

<script>
import jsbarcode from 'jsbarcode'
import VueQr from 'vue-qr'
export default {
  /** 生产制令信息确认单 **/
  name: 'ProductionConfirmation',
  components: {
    VueQr
  },
  props: {
    reportData: {
      type: Object,
      default: () => {
      }
    }
  },
  watch: {
    reportData: {
      handler(newVal, oldVal) {
        // this.createCode(newVal.commandbillCode)
        this.text = newVal.mechanismName
        this.commandbillCode = newVal.commandbillCode
        this.gyvalue = ''
      }
    }
  },
  data() {
    return {
      text:'',
      commandbillCode:'',
      gyvalue:'',
      userName:'',
      checkedList: [
        { label: '有铅', value: '有铅' },
        { label: '无铅', value: '无铅' },
        { label: '红胶', value: '红胶' }
      ],
      firstList: [
        { label: '每班首件', value: '每班首件' },
        { label: '转线(机型)', value: '转线(机型)' },
        { label: '新机试产', value: '新机试产' },
        { label: '软件变更', value: '软件变更' },
        { label: '调机(印刷、贴片)', value: '调机(印刷、贴片)' },
        { label: '程序变更', value: '程序变更' },
        { label: '回流焊曲线变更', value: '回流焊曲线变更' },
        { label: '物料变更(主/辅料)', value: '物料变更(主/辅料)' },
        { label: '设计变更', value: '设计变更' },
        { label: '重大工艺变更', value: '重大工艺变更' },
        { label: '反工', value: '反工' }
      ],
      hglist: [
        { label: '合格 可生产', value: '合格' },
        { label: '不合格 暂停生产', value: '不合格' }
      ],
    }
  },
  methods:{
    // createCode(val){
    //   jsbarcode("#barcode", val, {
    //     format: "CODE128",
    //     width:2,
    //     height:60,
    //     text: val,
    //     displayValue: true
    //   });
    // },
  },
  mounted() {
    this.userName = this.$store.state.user.username
    // this.createCode(this.reportData.commandbillCode)
    this.text = this.reportData.mechanismName
    this.commandbillCode = this.reportData.commandbillCode
    this.gyvalue = ''
  }
}
</script>

<style scoped>

</style>